const {ccclass, property} = cc._decorator;

@ccclass
export default class Control_Test1 extends cc.Component {

    private centerX: number = 0; 
    private centerY: number = 0;   
    private a: number = 40;     // x轴半径  
    private b: number = 100;    // y轴半径  
    private startAngle: number = Math.PI / 2;     //对应角度90
    private endAngle: number =  Math.PI / 2 * 3;  //对应角度270
    private numNodes: number = 10;                //mask内可展示出的数量

    //节点数据
    private scrollView: cc.ScrollView;
    private view: cc.Node;
    private item: cc.Node;

    //计算数据
    private viewBox: cc.Rect; 
    private angleStep: number; //单个弧度
    private outPoint: cc.Vec3 = cc.v3(0, 0 , 0);

    private contentChilde: cc.Node[];
    private showList: cc.Node[] = [];

    onLoad () {
        this.scrollView = cc.find('ScrollView', this.node).getComponent(cc.ScrollView);
        this.view = cc.find("ScrollView/view", this.node);
        this.item = cc.find("item", this.node);
    }

    start () {
        this.contentChilde = this.scrollView.content.children;
        this.viewBox = this.view.getBoundingBoxToWorld();
        this.angleStep = (this.endAngle - this.startAngle) / (this.numNodes - 1);

        for (let i = 0; i < 30; i++) {  
            const angle = this.startAngle + i * this.angleStep;  
            const x = this.centerX + this.a * Math.cos(angle);  
            const y = this.centerY + this.b * Math.sin(angle);  
              
            // 创建节点并设置位置  
            const newNode = cc.instantiate(this.item); // 假设我们使用一个精灵节点作为示例  
            this.scrollView.content.addChild(newNode); // 将节点添加到当前节点的子节点中  
            newNode.x = x;       
        }
    }

    protected update(dt: number): void {
 
        if (this.scrollView.isScrolling() == true || this.scrollView.isAutoScrolling() == true) {
            this.setActiveArrr();
            this.setPoint();
        }
    }

    //计算显示区域内的节点
    private setActiveArrr()
    {
        this.showList.length = 0;
        this.contentChilde.forEach((item) => {
            if (this.viewBox.intersects(item.getBoundingBoxToWorld())) {
                this.showList.push(item);
            }
        })
    }

    private setPoint() {
        for (let i = 0; i < this.showList.length; i++) {
            const angle = this.startAngle + i * this.angleStep;
            const x = this.centerX + this.a * Math.cos(angle);
            const y = this.centerY + this.b * Math.sin(angle);

            // 创建节点并设置位置  
            const newNode = this.showList[i]; // 假设我们使用一个精灵节点作为示例  

            cc.Vec3.lerp(this.outPoint, newNode.position, cc.v3(x, y, 0), 0.3);
            newNode.x = this.outPoint.x;
        }   
    }
}